<template>
  <div class="register-page-layout" @click="onHidePopover">
    <div class="container">
      <div class="input-box flex">
        <div class="icon">
          <img src="@/assets/icons/mobile-phone.png" />
        </div>

        <div class="mdn">
          <popover ref="popover">
            <div class="mdn-action">
              +{{ mdn }}
              <van-icon name="arrow-down" class="arrow-down-icon" />
            </div>
            <template v-slot:content>
              <div class="mdn-content">
                <div
                  v-for="item in mdns"
                  :key="item"
                  :class="['mdn-item', item === mdn && 'active']"
                  @click="onSelectMdn(item)"
                >+{{ item }}</div>
              </div>
            </template>
          </popover>

          <span class="divider">|</span>
        </div>
        <input v-model="phone" placeholder="手机号" type="number" />
      </div>

      <div class="input-box flex">
        <div class="icon">
          <img src="@/assets/icons/lock.png" />
        </div>
        <input v-model="code" placeholder="验证码" />
        <div class="ab-right flex">
          <span class="divider">|</span>
          <span :class="['captcha', state.smsBtn && 'inactive']" @click="getCaptcha">获取验证码</span>
        </div>
      </div>

      <div class="input-box flex">
        <div class="icon">
          <img src="@/assets/icons/lock.png" />
        </div>
        <input
          class="register-password"
          :style="{ flex: 1 }"
          v-model="password"
          :type="visible.password ? 'password' : 'text'"
          placeholder="请设置密码（8到16位）必须包含字母和数字"
        />
        <div class="ab-right flex">
          <van-icon
            :name="visible.password ? 'eye-o' : 'closed-eye'"
            color="#DDDDDD"
            @click="visible.password = !visible.password"
          />
        </div>
      </div>
    </div>

    <div class="register-btn">
      <van-button
        round
        size="large"
        color="#4586FF"
        :loading="state.registerBtn"
        :disabled="state.registerBtn"
        @click="onRegister"
      >注册</van-button>
    </div>

    <div class="register-info">
      确定即是接受
      <a>《版权声明》</a>
      和
      <a>《隐私保护》</a>
    </div>

    <div class="login-mode">
      <van-divider :style="{ color: '#CFD4DE', borderColor: '#CFD4DE' }">其他登录方式</van-divider>
      <div class="content" :style="{ justifyContent: isWechat ? 'space-between' : 'center' }">
        <div v-if="isWechat" class="grid">
          <div>
            <div class="icon wechat">
              <img src="@/assets/icons/wechat.png" alt="">
            </div>
            <div class="name">微信授权登录</div>
          </div>
        </div>

        <div class="grid" @click="toLogin">
          <div>
            <div class="icon another">
              <img src="@/assets/icons/shield.png" alt="">
            </div>
            <div class="name">短信验证码登录</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { Icon, Button, Divider } from 'vant'
import Popover from '@/components/Popover'
import { mdns } from '@/constants/common'
import { messages, toast } from '@/utils/messages'

Vue.use(Icon).use(Button).use(Divider)

export default {
  components: {
    Popover
  },

  data() {
    return {
      mdn: '86',
      phone: '',
      code: '',
      password: '',
      state: {
        time: 60,
        smsBtn: false,
        onConfirm: false
      },
      visible: {
        password: true
      },
      mdns
    }
  },

  computed: {
    ...mapGetters(['browser']),

    isWechat() {
      return this.browser.toLowerCase().indexOf('micromessenger') > -1
    }
  },

  methods: {
    onSelectMdn(mdn) {
      this.mdn = mdn
    },

    onHidePopover() {
      this.$refs.popover.visible = false
    },

    validateRequire() {
      return new Promise((resolve, reject) => {
        const label = {
          phone: '手机号',
          code: '验证码',
          password: '密码'
        }
        const requiredFields = ['phone', 'code', 'password']
        for (const item of requiredFields) {
          !this[item] && reject(messages.REQUIRED_INPUT(label[item]))
        }
        resolve()
      })
    },

    validateMobile() {
      return new Promise((resolve, reject) => {
        const label = '手机号'
        const regex = /^1[345678]\d{9}$/
        const { phone } = this

        if (!phone) {
          reject(messages.REQUIRED_INPUT(label))
        } else if (!regex.test(phone)) {
          reject(messages.PATTERN(label))
        } else {
          resolve(true)
        }
      })
    },

    validatePassword() {
      return new Promise((resolve, reject) => {
        const { password } = this
        const regex = /^(?![^a-zA-Z]+$)(?!\D+$)/

        if (password.length < 8 || password.length > 16) {
          reject(messages.PASSWORD_LENGTH(8, 16))
        } else if (!regex.test(password)) {
          reject(messages.PASSWORD_STRENGTH)
        } else {
          resolve()
        }
      })
    },

    getCaptcha() {
      this.validateMobile()
        .then(valid => {
          if (valid) {
            console.log(valid)
          }
        })
        .catch(err => {
          toast(err)
        })
    },

    async onRegister() {
      try {
        await this.validateRequire()
        await this.validateMobile()
        await this.validatePassword()
      } catch (err) {
        toast(err)
      }
    },

    toLogin() {
      this.$router.push({ name: 'login' })
    }
  }
}
</script>

<style lang="less" scoped>
.register-page-layout {
  .input-box {
    position: relative;
    align-items: center;
    margin: 32px 0;

    .icon {
      width: 18px;
      margin-right: 20px;
      display: flex;
      align-items: center;

      img {
        width: 18px;
      }
    }

    .mdn {
      display: flex;
      align-items: center;
      color: #cfd4de;

      .mdn-action {
        width: 53px;
      }

      .arrow-down-icon {
        margin-left: 6.5px;
        font-size: 10px;
      }

      .mdn-content {
        width: 86.5px;
        height: 190px;
        overflow-y: auto;
        padding: 8px 0;
      }

      .mdn-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        margin: 0 8px;
        border-bottom: 0.5px solid rgba(207, 212, 222, 0.3);
      }

      .active {
        color: #222222;
      }
    }

    input {
      border: none;
      background-color: rgba(0, 0, 0, 0);

      &::placeholder {
        color: #cfd4de;
        font-weight: 500;
      }
    }

    .register-password {
      &::placeholder {
        font-size: 12px;
      }
    }

    .ab-right {
      position: absolute;
      right: 0;
      align-items: center;
    }

    .divider {
      color: #cfd4de;
      margin: 0 8px;
    }

    .captcha {
      color: #4586ff;
      font-size: 12px;
      flex: 0 0 68px;
      width: 68px;
      font-weight: 500;
    }

    .inactive {
      color: #cfd4de;
    }
  }

  .register-btn {
    margin-top: 47.5px;
  }

  .register-info {
    font-weight: 300;
    text-align: center;
    font-size: 13px;
    margin-top: 31px;
    color: #999999;

    a {
      color: #4586FF;
    }
  }

  .login-mode {
    margin-top: 90px;

    .content {
      margin-top: 35px;
      padding: 0 10%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .grid {
        text-align: center;

        .icon {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: auto;
          color: #ffffff;
        }

        img {
          width: 34px;
        }

        .wechat {
          background: linear-gradient(to bottom, #00D701, #00BA00);
        }

        .another {
          background: linear-gradient(to bottom, #4586FF, #1868FF);
        }

        .name {
          font-size: 13px;
          color: #CFD4DE;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>